<!DOCTYPE html>
<script src="../resources/ahem.js"></script>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
  body {
    font: 20px Ahem;
    margin: 0;
    height: 5000px;
    width: 5000px;
  }
  #target {
    position: absolute;
    top: 3000px;
    left: 300px;
    height: 100px;
    background-color: green;
  }
</style>

<div id="target">target</div>
<script>
    function resetScroll() {
        window.scrollTo(1000, 1000);
        internals.setVisualViewportOffset(400, 300);
    }

    if (window.internals) {
        internals.setPageScaleFactor(2);

        test(() => {
            resetScroll();
            internals.settings.setPreferCompositingToLCDTextEnabled(
                true);
            document.execCommand("FindString", false, "target");
            assert_approx_equals(window.visualViewport.pageLeft, 167, 1);
            assert_approx_equals(window.visualViewport.pageTop, 2867, 1);
        }, "Test scrolled into view with prefer compositing enabled");


        test(() => {
            resetScroll();
            internals.settings.setPreferCompositingToLCDTextEnabled(
                false);
            document.execCommand("FindString", false, "target");
            assert_approx_equals(window.visualViewport.pageLeft, 167, 1);
            assert_approx_equals(window.visualViewport.pageTop, 2867, 1);
        }, "Test scrolled into view with prefer compositing disabled");
    }
</script>
